<template>
    <div class="km-flex" direction="{{attr.direction}}" content="{{attr.content}}" wrap="{{attr.wrap}}"
        align="{{attr.align}}" items="{{attr.items}}" style="gap: {{attr.gap}} ;">
        <slot name="km-item"></slot>
    </div>
</template>
<script>
    export default function () {

        let attr = this.reactive({
            direction: '',
            wrap: '',
            content: '',
            align: '',
            items: '',
            gap: '8px 12px'
        })

        this.attred = (name, oldValue, newValue) => {
            if (typeof attr[name] != "undefined") {
                attr[name] = (newValue == "" ? name : newValue);
            }
        }
    }
</script>
<style>
    .km-flex {
        width: 100%;
        height: 100%;
        display: flex;
    }

    .km-flex[direction="row"] {
        flex-direction: row;
    }

    .km-flex[direction="column"] {
        flex-direction: column;
    }

    .km-flex[direction="row-reverse"] {
        flex-direction: row-reverse;
    }

    .km-flex[direction="column-reverse"] {
        flex-direction: column-reverse;
    }

    .km-flex[wrap="nowrap"] {
        flex-wrap: nowrap;
    }

    .km-flex[wrap="wrap"] {
        flex-wrap: wrap;
    }

    .km-flex[content="flex-start"] {
        justify-content: flex-start;
    }

    .km-flex[content="flex-end"] {
        justify-content: flex-end;
    }

    .km-flex[content="center"] {
        justify-content: center;
    }

    .km-flex[content="space-between"] {
        justify-content: space-between;
    }

    .km-flex[content="space-around"] {
        justify-content: space-around;
    }

    .km-flex[content="space-evenly"] {
        justify-content: space-evenly;
    }

    .km-flex[align="center"] {
        align-content: center;
    }

    .km-flex[align="flex-start"] {
        align-content: flex-start;
    }

    .km-flex[align="flex-end"] {
        align-content: flex-end;
    }

    .km-flex[align="space-around"] {
        align-content: space-around;
    }

    .km-flex[align="space-between"] {
        align-content: space-between;
    }

    .km-flex[align="stretch"] {
        align-content: stretch;
    }

    .km-flex[items="center"] {
        align-items: center;
    }

    .km-flex[items="flex-start"] {
        align-items: flex-start;
    }

    .km-flex[items="flex-end"] {
        align-items: flex-end;
    }

    .km-flex[items="stretch"] {
        align-items: stretch;
    }

    .km-flex[items="baseline"] {
        align-items: baseline;
    }
</style>